﻿<style lang="less">
    .modal-box img{
        width: 600px;
    }
</style>

<template>
    <Card>
        <p slot="title">
            <Breadcrumb>
                <BreadcrumbItem to="/dashboard/index"><Icon type="ios-home-outline"></Icon> 首页</BreadcrumbItem>
                <BreadcrumbItem to="/sms/setting"><Icon type="ios-list"></Icon> 运营管理</BreadcrumbItem>
                <BreadcrumbItem to="/sys/holiday"><Icon type="ios-copy-outline"></Icon> 节假日配置</BreadcrumbItem>
            </Breadcrumb>
        </p>
        <Form class="step-form" ref="searchForm" :model="searchForm" :rules="searchFormRules" :label-width="100">
            <Row>
                <Row>
                    <Col span="6">
                    <FormItem label="节日名称：" prop="name">
                        <Input :disabled="hasSubmit" v-model="searchForm.name" placeholder="输入节日名称"></Input>
                    </FormItem>
                    </Col>
                    <Col span="7">
                    <Row>
                        <Col span="12">
                        <FormItem label="时间范围：" prop="date_s">
                            <DatePicker :disabled="hasSubmit" type="date" placeholder="开始时间" prop="date_s" v-model="searchForm.date_s"></DatePicker>
                        </FormItem>

                        </Col>
                        <Col span="1" style="text-align: center">-</Col>
                        <Col span="7">
                        <FormItem :label-width="1" prop="date_e">
                            <DatePicker :disabled="hasSubmit" type="date" placeholder="结束时间" prop="date_e" v-model="searchForm.date_e"></DatePicker>
                        </FormItem>
                        </Col>
                    </Row>
                    </Col>
                    <Col span="4">
                    <FormItem>
                        <Button type="primary" :disabled="hasSubmit" @click="handleSubmit('searchForm')" :loading="searchBrnLoading" icon="search">查询</Button>
                        <Button type="ghost" @click="handleReset('searchForm')" style="margin-left: 8px">重置</Button>
                    </FormItem>
                    </Col>
                </Row>
            </Row>
        </Form>
        <ButtonGroup v-if="this.tableSelects.length>0">
            <Poptip
                    confirm
                    title="确认全部隐藏吗？"
                    @on-ok="handeHide(1)"
            >
                <Button>全部隐藏</Button>
            </Poptip>
            <Poptip
                    confirm
                    title="确认全部显示吗？"
                    @on-ok="handeHide(0)"
            >
                <Button>全部显示</Button>
            </Poptip>
        </ButtonGroup>
        <Button type="primary" icon="android-add-circle" style="margin-bottom: 10px;" @click="showAdd()">添加节假日</Button>
        <Table
                border
                ref="selection"
                :columns="columns"
                :data="list"
                :loading="loading"
                @on-selection-change="this.selectRow"
        ></Table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page
                        :total="total"
                        :current="current"
                        :page-size="pageSize"
                        :show-elevator="true"
                        :page-size-opts="[12, 20, 30, 40]"
                        :show-sizer="true"
                        @on-change="changePage"
                        @on-page-size-change="changePageSize"
                ></Page>
            </div>
        </div>
        <Modal v-model="modalAdd" width="400" @on-cancel="handleReset('formAdd')">
            <p slot="header" style="text-align:center">
                <span>新增节假日</span>
            </p>
            <div style="text-align:left">
                <Form ref="formAdd" :model="formAdd" :rules="ruleAdd" :label-width="80">
                    <FormItem label="节日名称" prop="name">
                        <Input type="text" v-model="formAdd.name" placeholder="节日名称"></Input>
                    </FormItem>
                    <FormItem label="日期" prop="zero_time">
                        <DatePicker type="date" :value="formAdd.zero_time"  @on-change="handleChange" show-week-numbers placeholder="选择日期" style="width: 288px"></DatePicker>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="handleAddSubmit('formAdd')" icon="checkmark-round">提交</Button>
                        <Button type="ghost" @click="handleReset('formAdd')" style="margin-left: 8px">重新填写</Button>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer" style="text-align: center;"></div>
        </Modal>
    </Card>
</template>
<script>
    import Util from '../../libs/util';
    import moment from 'moment';

    export default {
        data () {
            return {
                columns: [
                    // {
                    //     type: 'selection',
                    //     key: 'user_id',
                    //     width: 60,
                    //     align: 'center'
                    // },
                    {
                        title: 'ID',
                        align: 'center',
                        width: 60,
                        key: 'id'
                    },
                    {
                        title: '节日名称',
                        key: 'name'
                    },
                    {
                        title: '日期',
                        key: 'zero_time',
                        render: (h, params) => {
                            return h('div', Util.formatDate(params.row.zero_time));
                        }
                    },
                    {
                        title: '添加时间',
                        key: 'create_time',
                        render: (h, params) => {
                            return h('div', Util.formatDate(params.row.create_time));
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('Button', {
                                        props: {
                                            size: 'small'
                                        }
                                    }, [
                                    h('Poptip', {
                                        props: {
                                            confirm: true,
                                            title: '确定要删除吗！',
                                            type: 'error',
                                            size: 'small'
                                        },
                                        on: {
                                            'on-ok': () => {
                                                this.handleDelete(params.row.id);
                                            }
                                        }
                                    }, '删除')
                                    ]);
                        }
                    }
                ],
                list: [],
                total: 0,
                current: this.$route.params.page ? this.$route.params.page : 1,
                pageSize: 12,
                loading: true,
                searchForm: {
                    name: '',
                    date_s: '',
                    date_e: ''
                },
                searchFormRules: {
                },
                hasSubmit: false,
                tableSelects: [],
                searchBrnLoading: false,
                modalAdd: false,
                formAdd: {
                    name: '',
                    zero_time: ''
                },
                ruleAdd: {
                    name: { required: true, message: '必须节日名称', trigger: 'blur' },
                    zero_time: { required: true, message: '必须选择日期', trigger: 'blur' }
                }
            };
        },
        mounted: function () {
            this.$nextTick(function () {
                const $params = {page: this.current};
                this.getList($params);
            });
        },
        methods: {
            handleChange (e) {
                this.formAdd.zero_time = e;
            },
            getList: function (params) {
                Util.ajax.post(`/adminapi/holiday/list`, params).then(response => {
                    this.list = response.data.data.list;
                    this.total = response.data.data.total;
                    this.current = response.data.data.current;
                    this.pageSize = response.data.data.pageSize;
                    this.loading = false;
                    this.hasSubmit = false;
                });
                this.searchBrnLoading = false;
            },
            selectRow (selection, row) {
                this.tableSelects = selection;
            },
            remove (index) {
                this.data6.splice(index, 1);
            },
            formatDate (datetime) {
                const date =  new Date(parseInt(datetime) * 1000);
                const y = date.getFullYear();
                let m = date.getMonth() + 1;
                m = m < 10 ? '0' + m : m;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                return y + '-' + m + '-' + d;
            },
            changePage (e) {
                this.loading = true;
                const params = {page: e, pageSize: this.pageSize};
                this.list = this.getList(params);
            },
            changePageSize (e) {
                this.loading = true;
                const params = {page: 1, pageSize: e};
                this.list = this.getList(params);
            },
            handleSubmit (name) {
                this.searchBrnLoading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.hasSubmit = true;
                        let params = {
                            ...this.searchForm,
                            page: 1,
                            pageSize: this.pageSize
                        };
                        params.date_s = params.date_s? moment(params.date_s).format('X'): '';
                        params.date_e = params.date_e? moment(params.date_e).subtract(-1, "days").format('X'): '';
                        this.getList(params);
                    } else {
                        this.searchBrnLoading = false;
                    }
                });
            },
            handleReset (name) {
                this.$refs[name].resetFields();
                this.hasSubmit = false;
                this.getList();
            },
            showAdd () {
                this.formAdd = {
                    name: '',
                    zero_time: ''
                };
                this.modalAdd = true;
            },
            handleAddSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.formAdd.zero_time = this.formAdd.zero_time? moment(this.formAdd.zero_time).format('X'): '';
                        Util.ajax.post(`/adminapi/holiday/add`, this.formAdd).then(response => {
                            if(response.data.code == 0) {
                                this.$Message.success('添加成功');
                                this.modalAdd = false;
                                this.getList();
                            }else {
                                this.$Message.error('添加失败');
                            }
                        });
                    }
                });
            },
            handleDelete (id) {
                Util.ajax.post(`/adminapi/holiday/delete`, {id: id}).then(response => {
                    if(response.data.code == 0) {
                        this.$Message.success('删除成功');
                        this.modalAdd = false;
                        this.getList();
                    }else {
                        this.$Message.error('删除失败');
                    }
                });
            }
        }
    };
</script>
